<template>
    <div class="box">
        <CardBox title="监测点全景"></CardBox>
        <div class="content-container">
            <div class="title">{{pointName}}</div>
            <img class="title-line" src="@/assets/img/moniter-title-line.png" alt="">  
<!--            <img class="introduction-img" src="@/assets/img/monitor-all-view.png" alt="">-->
            <SciencePopularization class="introduction-img"/>
        </div>
    </div>
</template>

<script>
import CardBox from '@/components/Global/CardBox.vue'
import SciencePopularization from '../../views/SciencePopularization.vue'
import {EventBus} from "../../utils/event-bus";
export default {
    inject: ['imgUrl'], // 注入公共变量
    components: {
        CardBox,
        SciencePopularization
    },
    data() {
        return {
            sceneList:null,
            pointName:''
        }
    },
    created() {
        EventBus.$on('set-route-item', (message) => {
            this.pointName=message.title;
            this.getItemQJT(message);
        })
    },
    methods:{
        getItemQJT(observation){
            var map={
                observationId:observation.id.toString(),
                type:'全景图',
                orderField:"sort",
                order:"asc"
            };
            this.$api.route.getItemList(map).then(response => {
                var scenes={};
                if (response) {
                    this.sceneList=response;
                    for (let i = 0; i < response.length; i++) {
                        scenes[response[i].id.toString()]={
                            title: response[i].name,
                            // panorama: require('@/assets/img/bedroom2.jpg'),
                            panorama: this.imgUrl.replace("mw=500&mh=500&","")+response[i].image, // 使用绝对路径
                            preview: this.imgUrl+response[i].image, // 使用绝对路径
                            hotSpots: []
                        }
                    }
                    EventBus.$emit('set-scenes', {scenes:scenes,firstScene:response[0].id.toString()});
                    // this.selectId(response[0].id.toString());
                }
            }).catch(error => {
                console.error('Error fetching getItemQJT:', error);
            });
        },

    }
}
</script>

<style lang="scss" scoped>
.content-container {
  padding: 11px 15px;
  height: 406px;
  margin-bottom: 20px;
  .title {
    font-size: 18px;
    color: #fff;
    text-align: center;
  }
  .title-line {
    width: 191px;
    height: 1px;
    margin: 10px auto 20px;
    display: block;
  }
  .introduction-img {
    width: 471px;
    height: 353px;
    margin: 0 auto;
    display: block;
  }
}

</style>